<template>
	<view class="wrap">
		<view class="search">
			<u-search v-model="keywords" @custom="search" @search="search"></u-search>
		</view>
		<scroll-view class="scroll-list" scroll-y="true">
			<view v-for="(message,index) in messageList" :key="index" class="uni-list">
				<uni-view  class="uni-list-cell">
					<view class="uni-media-list" @click="navTo('/pages/sys/msg/details')">
						<view v-if="message.messageType == 'NOTICE'" class="home-icon icon-color03">
							<i  class="iconfont icon-tongzhi1"></i><u-badge v-if="message.status == 'UNREAD'" :is-dot="true" type="error"></u-badge>
						</view>
						<view v-if="message.messageType == 'PROMPT'" class="home-icon icon-color04">
							<i  class="iconfont icon-xinwen"></i><u-badge v-if="message.status == 'UNREAD'" :is-dot="true" type="error"></u-badge>
						</view>
						<view v-if="message.messageType == 'WARNING'" class="home-icon icon-color05">
							<i  class="iconfont icon-msg-system"></i><u-badge v-if="message.status == 'UNREAD'" :is-dot="true" type="error"></u-badge>
						</view>
						<view v-if="message.messageType == 'CHAT'" class="home-icon icon-color06">
							<i  class="iconfont icon-tongzhi"></i><u-badge v-if="message.status == 'UNREAD'" :is-dot="true" type="error"></u-badge>
						</view>						
						<uni-view  class="uni-media-list-body">
							<uni-view class="uni-media-list-text-top"><span>{{message.messageTitle}}</span><span style="font-size: 26rpx;color: #999999;">12:35</span></uni-view>
							<uni-view class="uni-media-list-text-bottom">
								<uni-text><span>{{message.messageContent}}</span></uni-text>
							</uni-view>
						</uni-view>
					</view>
				</uni-view>
			</view>
		</scroll-view>
		<uni-load-more iconType="auto" :content-text="{
								contentdown: '向上滑动，加载更多',
								contentrefresh: '加载中...',
								contentnomore: '没有更多...'
							}" :status="loadMessage">
		</uni-load-more>
	</view>
</template>
<script>


const PAGE_SIZE = 10;
export default {
	data() {
		return {
			socketShow: false,			
			keywords: '',
			loadMessage: '',
			refreshPageNum: 1,
			messageTotalNum: 0,
			messageList: [{'messageId':100,'messageTitle':'这是一条测试消息','messageContent':'这里是测试内容','messageType':'NOTICE','messageLevel':'A','recipientId':1,'status':'UNREAD'}],									
		};
	},
	onLoad() {
		uni.$on("websocket_msg_rcv",() =>{
			console.log('msg---rcv')
			setTimeout(()=>{
				this.refreshMyMessage(true);
			},1000);			
		});
		uni.showLoading({
			title:"加载中...",
			icon:"none"
		})
		
		this.loadMessage = "加载中";
		Promise.all([this.$u.api.message.listMyMessage({
			recipient_name:this.vuex_user.userName,
			pageNum:1,
			pageSize:PAGE_SIZE
			}
		)]).then(res =>{
			uni.hideLoading();
			const messageRes = res[0]?.rows || [];
			if(this.refreshPageNum == 1){
				this.messageList.splice(0,this.messageList.length,...messageRes);					
			} else {
				this.messageList.push(...messageRes);
			}
			
			this.messageTotalNum = res[0]?.total || 0;
			
			if(this.messageList.length >= this.messageTotalNum){
				this.loadMessage = '没有更多';
			}else{
				this.loadMessage = '加载更多';
			}			
		}).catch(err =>{
			this.messageTotalNum = res[0]?.total || 0;
			
			if(this.messageList.length >= this.messageTotalNum){
				this.loadMessage = '没有更多';
			}else{
				this.loadMessage = '加载更多';
			}
		});		
	},
	//到达底部
	onReachBottom(){
		this.refreshMyMessage();
	},
	//下拉刷新
	onPullDownRefresh(){
		this.refreshMyMessage(true);
	},
	methods: {
		navTo(url) {
			uni.navigateTo({
				url: url
			});
		},
		search(value) {
			this.$u.toast('搜索内容为：' + value)
		},				
		//刷新MESSAGE列表
		refreshMyMessage(isRefrsh){
			if(isRefrsh){
				this.refreshPageNum = 1
			} else {
				if( this.messageList.length >= this.messageTotalNum){
					//当前展示数量已经大于等于所有消息数量
					return ;
				} else {
					this.refreshPageNum += 1;
				}
			}
			
			uni.showLoading({
				title:"加载中...",
				mask:true
			})
			
			this.$u.api.message.listMyMessage({
				recipient_name:this.vuex_user.userName,
				pageNum:this.refreshPageNum,
				pageSize:PAGE_SIZE
			}).then(res =>{
				const messageRes = res?.rows || [];
				if(this.refreshPageNum == 1){
					this.messageList.splice(0,this.messageList.length,...messageRes);					
				} else {
					this.messageList.push(...messageRes);
				}
				
				this.messageTotalNum = res?.total || 0;
				
				if(this.messageList.length >= this.messageTotalNum){
					this.loadMessage = '没有更多';
				}else{
					this.loadMessage = '加载更多';
				}			
				
				uni.stopPullDownRefresh();
				uni.hideLoading();																			
			}).catch(e => {				
				uni.stopPullDownRefresh();
				uni.hideLoading();
			});
			
		},		
	}
};

</script>
<style lang="scss">
@import '../../../common/uni.css';
page {
	background-color: #f5f5f5;
}
.wrap .search{
	background: #ffffff;
}
.uni-title{
	font-size: 30rpx;
	color: #333333;
	padding: 10px;
	background: #fff;
	border-top:1px solid #ededed;
	margin-top: 20rpx;
}
.uni-media-list {
    padding: 15px 15px;

}
.uni-media-list-body {
    height: 42px;
	padding-left:20rpx;
}
.uni-media-list-text-top{
	height: 40rpx;
    overflow: hidden;
	width: 100%;
	line-height: 40rpx;
	font-size: 32rpx;
	display: flex;
	justify-content: space-between;
}

.uni-media-list-text-bottom {
    width: 100%;
    line-height: 24rpx;
    font-size: 26rpx;
	color: #666666;
	span{
		margin-right: 10rpx;
	}
}


</style>
